<template>
  <ContainerGroup>
    <Container>
      <div class="ck-filter-form">
        <div class="form-item-container">
          <!-- 1 -->
          <div class="form-item">
            <span class="form-item-label">院区：</span>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="三香总院" />
              <el-checkbox label="" />
            </el-checkbox-group>
          </div>
        </div>
        <div class="form-item-container">
          <!-- 1 -->
          <div class="form-item">
            <span class="form-item-label">床位类型：</span>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="集中床位" />
              <el-checkbox label="非集中床位" />
            </el-checkbox-group>
          </div>
        </div>
        <div class="form-item-container">
          <!-- 1 -->
          <div class="form-item">
            <span class="form-item-label">床位状态：</span>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="空床" />
              <el-checkbox label="非空床" />
            </el-checkbox-group>
          </div>
        </div>
        <FilterForm
          ref="filterForm"
          :elements="filterElements"
          :button-list="buttonList"
        />
      </div>
    </Container>

    <div class="department-box">
      <div v-for="(item, index) in alldata" :key="index" class="ment">
        <div class="ment-title">{{ item.areaName }}</div>
        <div class="ment-content">
          <span>床位总数 {{ item.bedsCount }} </span
          ><el-progress
            :text-inside="true"
            :stroke-width="17"
            class="progress"
            :percentage="item.usedBedsCountDouble"
          />
        </div>
        <div class="ment-details">
          <!-- 非集管 -->
          <div style="width: 50%; border-right: 1px solid #e5e5e5">
            <div class="letuer-title" style="color: #b2b2b2">
              <span style="color: #b2b2b2">非集管床位</span>
              <span
                style="margin-left: 10px; display: inline-block; color: #b2b2b2"
                >{{ item.noFocusManager }}</span
              >
              <span style="color: #b2b2b2">
                已预约{{ item.registerBedCount }}
              </span>
            </div>
            <div class="letuer-content">
              <div class="letuer-square" style="color: #b2b2b2">空床</div>
              <div class="letuer-square">
                <div class="square-color-one" />
                <div style="display: inline-block; color: #f5b923">
                  {{ item.manEmptyBedsCount1 }}
                </div>
              </div>
              <div class="letuer-square">
                <div class="square-color-two" />
                <div style="display: inline-block; color: #f5b923">
                  {{ item.womanEmptyBedsCount1 }}
                </div>
              </div>
              <div class="letuer-square">
                <div class="square-color-three" />
                <div style="display: inline-block; color: #f5b923">
                  {{ item.unknownEmptyBedsCount1 }}
                </div>
              </div>
            </div>
          </div>
          <!-- 集管 -->
          <div style="width: 50%">
            <div class="letuer-title">
              <span style="color: #888888">集管床位</span>
              <span
                style="margin-left: 10px; display: inline-block; color: #888888"
                >{{ item.focusManager }}</span
              >
              <span style="color: #888888">
                已预约 {{ item.registerBedCount }}</span
              >
            </div>
            <div class="letuer-content">
              <span class="letuer-square" style="color: #888888">空床</span>
              <div class="letuer-square">
                <div class="square-color-one" />
                <div style="display: inline-block; color: #f5b923">
                  {{ item.manEmptyBedsCount }}
                </div>
              </div>
              <div class="letuer-square">
                <div class="square-color-two" />
                <div style="display: inline-block; color: #f5b923">
                  {{ item.womanEmptyBedsCount }}
                </div>
              </div>
              <div class="letuer-square">
                <div class="square-color-three" />
                <div style="display: inline-block; color: #f5b923">
                  {{ item.unknownEmptyBedsCount }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ContainerGroup>
</template>
<script>
import Container from "../../components/Container.vue";
import { getEemptyBedsList } from "../../utils/apis/registrationApi";
// import OperationContainer from "../../components/OperationContainer.vue";
export default {
  name: "Index",
  components: { Container },
  data() {
    return {
      bedStatus: [], // 床位状态
      bedType: [], // 床位类型
      activeName:'',
      hospitalDistrict: ["1"], // 院区
      alldata: [],
      widthStyle: "width:" + window.screen.width + "px",
      allRoom: [],
      tableLoading: false,
      dialogVisible: false,
      drawerVisible: false,
      filterElements: [
        {
          key: "sexy",
          type: "Select",
          label: "科室",
          value: "",
          options: [
            {
              label: "男",
              value: "1",
            },
            {
              label: "女",
              value: "2",
            },
          ],
        },
        {
          key: "aihao",
          type: "Select",
          label: "病区",
          value: "",
          options: [
            {
              label: "看电影",
              value: "1",
            },
            {
              label: "游泳",
              value: "2",
            },
            {
              label: "下象棋",
              value: "3",
            },
          ],
        },
      ],
      buttonList: [
        {
          label: "查询",
          type: "primary",
          icon: "search",
          handlerClick: this.handerSearch,
        },
        {
          label: "重置",
          type: "info",
          icon: "reset",
          handlerClick: this.handlerReset,
        },
      ],
      tableData: [],
      tableColumns: [
        {
          type: "expand",
        },
        {
          title: "编号",
          dataIndex: "code",
          width: 100,
        },
        {
          title: "姓名",
          dataIndex: "name",
          width: 100,
        },
        {
          title: "年龄",
          dataIndex: "age",
          width: 100,
        },
        {
          title: "组别",
          dataIndex: "group",
        },
        {
          title: "地址",
          dataIndex: "addr",
        },
        {
          title: "操作",
          width: 180,
          render: [
            {
              label: "编辑",
              type: "primary",
              handlerClick: this.handlerEidt,
            },
            {
              label: "查看",
              type: "info",
              handlerClick: this.handlerDetail,
            },
            {
              label: "撤销",
              type: "info",
              handlerClick: this.handlerDetail,
            },
            {
              label: "删除",
              type: "delete",
              handlerClick: this.handlerDelete,
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.getRooms();
    this.tableLoading = true;
    setTimeout(() => {
      this.tableLoading = false;
      this.tableData = [
        {
          code: 1,
          name: "table",
          age: 18,
          group: "第一组",
          selectAble: false,
          addr:
            "新疆维吾尔自治区呼和浩锡林郭勒盟自治县金桥镇银桥村铁桥组5689号尼古拉艾买提",
        },
        {
          code: 2,
          name: "table",
          age: 18,
        },
        {
          code: 3,
          name: "table",
          age: 18,
        },
        {
          code: 4,
          name: "table",
          age: 18,
          group: "第一组",
          addr:
            "新疆维吾尔自治区呼和浩锡林郭勒盟自治县金桥镇银桥村铁桥组5689号尼古拉艾买提",
        },
        {
          code: 5,
          name: "you children",
          age: 18,
          selectAble: false,
          children: [
            {
              code: 6,
              name: "table2",
              age: 18,
            },
            {
              code: 7,
              name: "table2",
              age: 18,
            },
            {
              code: 8,
              name: "table2-3",
              age: 18,
              children: [
                {
                  code: 19,
                  name: "table3",
                  age: 18,
                },
                {
                  code: 20,
                  name: "table3",
                  age: 18,
                },
              ],
            },
            {
              code: 9,
              name: "table2",
              age: 18,
            },
            {
              code: 10,
              name: "table2",
              age: 18,
            },
          ],
        },
        {
          code: 11,
          name: "table",
          age: 18,
        },
      ];
    }, 1500);
  },
  methods: {
    tabshandleClick(tab, event){
     console.log(tab)
     console.log(event)

    },
    // 获取房间
    getRooms(data) {
      // console.log(data);
      const parms = {
        areaCode: "",
        bedTypeCodeList: this.bedType,
        deptCode: "",
        districtCodeList: this.hospitalDistrict,
        isEmptyCodeList: this.bedStatus,
        name: "",
      };
      getEemptyBedsList(parms).then((res) => {
        if (res.data.code === 200) {
          console.log(res.data);
          if (res.data.data.三香总院) {
            res.data.data.三香总院.forEach((item) => {
              this.alldata.push(item);
            });
          }
        }
      });
    },
    format(percentage) {
      return percentage === 100 ? "100" : `${percentage}`;
    },
    handleFun() {},

    pageChange(page) {
      console.log(page);
    },
    handlerEidt(row) {
      this.dialogVisible = true;
    },
    handlerDetail(row) {
      console.log(row);
      this.drawerVisible = true;
    },
    handerSearch(val) {
      console.log(val);
    },
    // 重置
    handlerReset() {
      this.$refs.filterForm.reset();
    },
    handlerDelete(row) {
      this.$confirm({
        content: "确定要删除该项吗？",
        title: "确认信息",
        okFn: (res) => {
          console.log(res);
        },
        cancelFn: (res) => {
          console.log("取消");
        },
      });
    },
    handlerDeleteAll(params) {
      console.log(this.$toast.warning("失败了"));
      // this.$toast.warning("成功了")
    },
    dialogConfirm() {
      console.log("ss");
    },
    drawConfirm() {
      console.log("drawer");
    },
    getSelectionItems(list) {
      console.log(list);
    },
  },
};
</script>
<style lang="less" scoped>
.form-item {
  min-width: 280px;
}
.letuer-title {
  padding-left: 10px;
  box-sizing: border-box;
}
.letuer-square {
  margin-right: 7px;
}
.square-color-one,
.square-color-two,
.square-color-three {
  width: 17px;
  height: 17px;
  display: inline-block;
  margin: -3px 0;
}
.square-color-one {
  background-color: #71acfd;
}
.square-color-two {
  background-color: #fc9691;
}
.square-color-three {
  background-color: #e5e5e5;
}
.letuer-content {
  display: flex;
  margin-top: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}
.ment-details {
  margin-top: 10px;
  font-size: 16px !important;
  display: flex;
}
.progress {
  width: 68%;
  display: inline-block;
}
.ment-content {
  font-size: 16px !important;
  color: #888888;
  text-align: center;
}
.ment-title {
  font-size: 20px;
  font-weight: 600;
  padding: 17px 0;
  color: #555555;
  text-align: center;
}
.department-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ment {
  width: 364px;
  height: 160px;
  box-shadow: 0px 3px 3px 0px rgba(33, 101, 249, 0.09);
  margin: 7px 8px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  background-color: #fff;
}
.ck-filter-form {
  display: flex;
  align-items: top;
  overflow: hidden;
  .form-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      margin: 3px;
      margin-right: 15px;
      .form-item-label {
        color: #909399;
        text-align: right;
        font-size: 16px;
        white-space: nowrap;
      }
    }
  }
  .right-btn-container {
    text-align: center;
    display: flex;
    padding-top: 5px;
    .form-item-btn {
      margin: 0px 3px;
    }
    .more-text {
      display: block;
      width: 50px;
      margin-top: 6px;
      //   color:@themColor;
      cursor: pointer;
      user-select: none;
    }
  }
}
</style>
<style lang="less">
.form-item-label {
  color: #909399;
  text-align: right;
  font-size: 16px;
  white-space: nowrap;
}
</style>
